<template>
    <section class="filial-piety-main">
      <van-tabs v-model="active">
        <van-tab title="最新">
          <pull-up-reload
            :on-infinite-load="onInfiniteLoad"
            :parent-pull-up-state="infiniteLoadData.pullUpState"
            style="margin-bottom: 50px;">
            <RecommendList :newData="newData" @new-id="newId"></RecommendList>
          </pull-up-reload>
        </van-tab>
        <van-tab title="发现好产品">
          <pull-up-reload
            :on-infinite-load="onInfiniteLoad"
            :parent-pull-up-state="infiniteLoadData.pullUpState"
            style="margin-bottom: 50px;">
            <RecommendList :newData="newData" @new-id="newId"></RecommendList>
          </pull-up-reload>
        </van-tab>
        <van-tab title="健康养生">
          <pull-up-reload
            :on-infinite-load="onInfiniteLoad"
            :parent-pull-up-state="infiniteLoadData.pullUpState"
            style="margin-bottom: 50px;">
            <RecommendList :newData="newData" @new-id="newId"></RecommendList>
          </pull-up-reload>
        </van-tab>
        <van-tab title="走进SOFO">
          <pull-up-reload
            :on-infinite-load="onInfiniteLoad"
            :parent-pull-up-state="infiniteLoadData.pullUpState"
            style="margin-bottom: 50px;">
            <RecommendList :newData="newData" @new-id="newId"></RecommendList>
          </pull-up-reload>
        </van-tab>
      </van-tabs>

      <Loading :show="isLoading"></Loading>
    </section>
</template>

<script type="text/ecmascript-6">
  import RecommendList from '../../components/RecommendList.vue'
  import PullUpReload from '../../components/PullUpReload.vue'
  import Loading from '../../components/Loading.vue'

  export default {
    components:{
      RecommendList,Loading,PullUpReload
    },
    data() {
      return {
        isLoading:false,
        active:0,
        newData:[
          {
            type:1,
            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
            src:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
            time:'北京青年报 20分钟前'
          },
          {
            type:2,
            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
            src:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
            time:'北京青年报 20分钟前'
          },
          {
            type:3,
            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
            src:[
              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
            ],
            time:'北京青年报 20分钟前'
          },
        ],//

        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    methods: {
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
//          this.getPullUpMoreData()
        }
        done()
      },
      newId(id){
        this.$router.push({
          name:'recommendDetail',
          query:{
            id:id
          }
        })
      },
    },
  }
</script>

<style lang="scss">
 @import '../../assets/css/filialPiety.scss';
</style>
